<template>

	<view>
		<view class="box-bg">
			<view class="navigationbar">
				<uni-data-select v-model="searchs.loading" :localdata="rangeup" :clear="true" class="select-view"
					style="display: inline-block;" placeholder="装：不限">
				</uni-data-select>
				<uni-data-select v-model="searchs.unLoading" :localdata="rangedown" :clear="true" class="select-view"
					style="display: inline-block;" placeholder="卸：不限">
				</uni-data-select>
				<view style="width: 2%; display: inline-block;"></view>
				<uni-data-select v-model="searchs.i" :localdata="ranges" :clear="true" class="select-views"
					style="display: inline-block;">
				</uni-data-select>
				<view class="city" @click="search" style="display: inline-block;">
					搜索
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scrollview">
			<view class="tableBox">
				<uni-card :title="title+goods[index].sourceId" v-for="(item,index) in goods" margin="30rpx -16rpx">
					<view>
						<view class="Hy3">
							<uni-icons type="download-filled" size="25" color="#2E7CFA"></uni-icons>
							<text class="text">{{item.loadingSite.name}}<text
									style="color: #d9d9d9; font-size: 32rpx; font-weight: bold;">—</text>{{item.loadingSite.city}}{{item.loadingSite.county}}</text>
						</view>
						<view class="point"></view>
						<view class="Hy3">
							<uni-icons type="upload-filled" size="25" color="#27D189"></uni-icons>
							<text class="text">{{item.unloadingSite.name}}<text
									style="color: #d9d9d9; font-size: 32rpx; font-weight: bold;">—</text>{{item.unloadingSite.city}}{{item.unloadingSite.county}}</text>
						</view>
					</view>
					<view class="messview">
						<view class="smallview">货物：{{item.goodsName}}</view>
						<view class="smallview">余量：{{item.goodsHeadroom}}</view>
					</view>
					<view class="price-out">
						<text class="price">{{item.sourceFreight}}</text><text class="price-t">元/吨</text>
					</view>
					<view class="tag-view">
						<button class="tag" type="primary" @click="show(goods[index].sourceId)">查看</button>
					</view>
				</uni-card>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rangeup: [],
				rangedown: [],
				value:0,
				ranges: [{
						value: 0,
						text: "智能排序"
					},
					{
						value: 1,
						text: "价格"
					}
				],
				title: "货源编号",
				goods: [],
				searchs: {
					loading: "无",
					unLoading: "无",
					i: 0
				}
			}
		},
		created() {
			this.showGoods()
			this.locations()
		},
		methods: {
			async showGoods() {
				const res = await uni.$http.get("192.168.9.30:8080/waybill/sourceListAll")
				this.goods = res.data.data.sourceLists
			},
			async locations() {
				const res = await uni.$http.get("192.168.9.30:8080/waybill/selectCity")
				console.log(res.data.data1)
				for (var i = 0; i < res.data.data1.length; i++) {
					this.rangeup.push({
						value: res.data.data1[i],
						text: res.data.data1[i]
					});
					this.rangedown.push({
						value: res.data.data1[i],
						text: res.data.data1[i]
					});
				}
			},
			show(sourceId) {
				uni.navigateTo({
					url: '/pages/found-goods/Supply-hall/Source-details/Source-details?sourceId=' + sourceId
				})
			},
			async search() {
				console.log(this.searchs)
				const res = await uni.$http.post("192.168.9.30:8080/waybill/selectMoreBySiteName", this.searchs)
				console.log(res)
				if (res.data.code == 0) {
					uni.$showMsg("搜索成功")
					console.log(res.data.data1)
					this.goods = res.data.data1
					this.searchs.loading = "无"
					this.searchs.unLoading = "无"
					this.searchs.i = 0
				}
			},
		}
	}
</script>

<style>
	.scrollview {
		width: 100%;
		height: 680px;
	}

	.lefttext {
		margin-left: 2%;
	}

	.navigationbar {
		width: 100%;
		height: 80rpx;
		background-color: #fff;

	}

	.select-view {
		margin-left: 20rpx;
		width: 200rpx
	}

	.select-views {
		width: 180rpx
	}

	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-left: 3%;
	}

	.nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}

	.point {
		width: 30rpx;
		height: 40rpx;
		background-image: url("../../../static/img/point.png");
		background-repeat: no-repeat;
		background-size: 100%;
		margin-left: 8rpx;
	}

	.price-t {
		position: relative;
		left: 10rpx;
		color: red;
		font-weight: bold;
		font-size: 30rpx;
		display: inline-block;
		top: 4rpx;
	}

	.smallview {
		margin-top: 7rpx;
	}

	.price-out {
		width: 200rpx;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.tag {
		display: inline-block;
		border-radius: 30px;
		width: 180rpx;
		height: 80rpx;
		background-color: #363EDF;
		margin-left: 20rpx;
		margin-top: -100rpx;
	}

	.tag-view {
		float: right;
		width: 200rpx;
	}

	.messview {
		width: 100%;
		height: 100rpx;
		background-color: #f6f6f6;
		margin-top: 46rpx;
	}

	.unicard {
		margin: 10rpx;
	}

	.price {
		color: red;
		font-size: 50rpx;
		font-weight: bold;
		display: inline-block;
	}

	.Hy2 {
		position: relative;
		top: 0px;
		left: -4rpx;
		padding-bottom: 8rpx;
	}

	.Hy2 .text {
		position: absolute;
		top: 8rpx;
		left: 60rpx;
		font-size: 32rpx;

	}

	.Hy3 {
		position: relative;
		top: 0px;
		left: -4rpx;
		padding-bottom: 8rpx;
	}

	.Hy3 .text {
		position: absolute;
		top: 8rpx;
		left: 60rpx;
		font-size: 32rpx;

	}

	.tableBox1 {

		width: 650rpx;
		height: 300rpx;
		margin: auto;

	}

	.tableBox {

		width: 650rpx;
		height: 300rpx;
		margin: auto;
	}

	.HyText {
		display: inline-block;
		padding-bottom: 8rpx;
		color: gray;
		font-size: 27rpx;
		position: relative;
		top: 0px;
		left: 20rpx;
	}

	.box-top {
		background-color: #003cb4;
		justify-content: space-between;
		height: 80rpx;
		align-items: center;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 5rpx 10rpx 0;
		overflow: hidden;
		margin-top: 2rpx;
	}


	.demo-uni-row {
		margin-bottom: 10px;
		display: block;
	}

	.demo-uni-row button {
		font-size: 22rpx;
		color: #5555ff;
	}
</style>
